<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getHotelDetail } from '../../api/hotel'
import { showToast } from 'vant'

const route = useRoute()
const router = useRouter()
const hotelId = route.params.id as string

// 酒店信息
const hotel = ref<any>({})
// 房间列表
const rooms = ref<any[]>([])
// 加载状态
const loading = ref(false)

// 获取酒店详情
const fetchHotelDetail = async () => {
  try {
    loading.value = true
    const res = await getHotelDetail(hotelId)
    hotel.value = res.data || {}
    rooms.value = res.data?.rooms || []
  } catch (error: any) {
    showToast(error.message || '获取酒店详情失败')
  } finally {
    loading.value = false
  }
}

// 查看房间详情
const viewRoomDetail = (roomId: string) => {
  router.push(`/room/${roomId}`)
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 页面初始化
onMounted(() => {
  fetchHotelDetail()
})
</script>

<template>
  <div class="hotel-detail-container">
    <van-nav-bar
      title="酒店详情"
      left-arrow
      @click-left="goBack"
    />
    
    <div class="loading-container" v-if="loading">
      <van-loading type="spinner" />
    </div>
    
    <template v-else>
      <!-- 酒店基本信息 -->
      <div class="hotel-info">
        <!-- <van-image
          width="100%"
          height="200"
          :src="hotel.image"
          fit="cover"
        /> -->
        <div class="hotel-name">{{ hotel.name }}</div>
        <div class="hotel-address">{{ hotel.address }}</div>
        <div class="hotel-rating" v-if="hotel.rating">
          <van-tag type="primary">{{ hotel.rating }}分</van-tag>
        </div>
      </div>
      
      <!-- 房间列表 -->
      <div class="rooms-container">
        <div class="section-title">可预订房间</div>
        <div v-if="rooms.length === 0" class="empty-list">
          暂无可预订房间
        </div>
        <div v-else class="room-list">
          <van-cell-group inset>
            <van-cell
              v-for="room in rooms"
              :key="room.id"
              :title="room.roomType"
              :label="room.status"
              is-link
              @click="viewRoomDetail(room.roomID)"
            >
              <template #value>
                <div class="room-price">￥{{ room.price }}</div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>
.hotel-detail-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 20px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.hotel-info {
  background-color: #fff;
  padding-bottom: 16px;
}

.hotel-name {
  padding: 16px 16px 8px;
  font-size: 18px;
  font-weight: bold;
}

.hotel-address {
  padding: 0 16px 8px;
  font-size: 14px;
  color: #666;
}

.hotel-rating {
  padding: 0 16px;
}

.rooms-container {
  margin-top: 12px;
}

.section-title {
  padding: 0 16px;
  margin: 16px 0 8px;
  font-size: 16px;
  font-weight: bold;
}

.empty-list {
  text-align: center;
  padding: 40px 0;
  color: #969799;
}

.room-list {
  padding: 0 16px;
}

.room-price {
  color: #ee0a24;
  font-weight: bold;
}
</style> 